<template>
  <div class="warning-container" v-loading="isloading">
    <div class="warnig-box">
      <div class="warning-title">
        您编制的村庄其中有<span class="warnig-num">{{ total }}</span
        >个村庄被预警，请点击预警详情了解并及时跟进！
      </div>

      <div class="searchBox">
        <el-input
          v-model="listquery.key"
          size="small"
          suffix-icon="el-icon-search"
          class="einput"
          clearable
          @change="getdata"
          @clear="getdata"
        />
      </div>
    </div>

    <el-dialog
      title="注意"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
    >
      <div>
        <p v-for="(item, index) in warningdata" :key="index">
          <span><i class="el-icon-warning redicon"></i></span>【<span
            class="redicon"
            >{{ item.name }}</span
          >】阶段 截止日期为【<span class="redicon">{{ item.date }}</span
          >】
          <span v-if="item.day > 0 && item.count < 100"
            >距离截止日期还有<span class="redicon">{{ item.day }}</span
            >天，请加快进度</span
          >
          <span v-if="item.day < 0 && item.count < 100"
            >已超过截止日期<span class="redicon">{{ item.day * -1 }}</span
            >天，请补充完成进度并及时上报原因</span
          >
          <span v-if="item.day < 0 && item.count == 100"
            >完成历史时间超过截止日期<span class="redicon">{{
              item.day * -1
            }}</span
            >天</span
          >
          <span v-else>今天是截止日期，请在今日之前上传进度包</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div>
      <div class="header">
        <div><i class="el-icon-d-arrow-right"></i>预警村庄列表</div>
        <div class="warning-tips">
          <i class="el-icon-chat-line-round"></i
          >进度条内圆形数字若为红色，代表已超时，数字为超时天数；
          进度条内圆形数字若为橙色，代表接近截至日期，数字距离截止日期天数；
          进度条内圆形数字若为蓝绿色，代表已完成，但完成日期超过截止日期；
          若无圆形标记，则代表进度正常。
        </div>
      </div>

      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        row-key="id"
        style="width: 100%"
        class="eltable"
        :default-expand-all="isExpand"
        @expand-change="expand"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="序号" width="100" prop="id">
          <template slot-scope="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="village" label="村庄名" width="220" />
        <el-table-column label="所属行政区划" width="220">
          　<template slot-scope="scope">
            <span>{{ scope.row.city }}</span
            >-<span>{{ scope.row.country }}</span
            >-<span>{{ scope.row.town }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="warning" label="预警详情" width="150">
          <template
            slot-scope="scope"
            v-if="scope.row.warningData && scope.row.warningData.length > 0"
          >
            <el-button
              type="warning"
              icon="el-icon-message-solid"
              @click="query(scope.row)"
              circle
            ></el-button>
            　
          </template>
        </el-table-column>
        <!-- <el-table-column label="阶段完成进度">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            prop=""
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div
                @click="openstate(scope.row.id, item)"
                :class="[
                  scope.row.progressNames[item] ? 'active' : 'noclick',
                  'progressli',
                ]"
              >
                <el-progress
                  :percentage="scope.row.progressNames[item]"
                  :format="format"
                  text-inside

                  :color="customColorMethod"
                ></el-progress>
                <span
                  v-show="scope.row.warningData[item].day"
                  :class="[
                    warnState[scope.row.warningData[item].state],
                    'spanicon',
                  ]"
                  >{{ scope.row.warningData[item].day }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column> -->

        <el-table-column label="阶段完成进度[阶段当前年度截止日期">
          <el-table-column
            v-for="item in rateArr"
            :key="item"
            prop=""
            :label="item"
            width="160"
          >
            <template slot-scope="scope">
              <div
                @click="openstate(scope.row.id, item.split('[')[0])"
                :class="[
                  scope.row.progressNames[item.split('[')[0]]
                    ? 'active'
                    : 'noclick',
                  'progressli',
                ]"
              >
                <el-progress
                  :percentage="scope.row.progressNames[item.split('[')[0]]"
                  :format="format"
                  text-inside
                  :color="customColorMethod"
                ></el-progress>
                <span
                  v-if="
                    scope.row.warningData &&
                    scope.row.warningData[item.split('[')[0]] &&
                    scope.row.warningData[item.split('[')[0]].day
                  "
                  :class="[
                    warnState[scope.row.warningData[item.split('[')[0]].state],
                    'spanicon',
                  ]"
                  >{{ scope.row.warningData[item.split("[")[0]].day }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="completionYear" label="任务年限" width="220" />
      </el-table>

      <right-div
        :list="resultList"
        v-if="rightPanelShow"
        @closeRightPanel="closeRightPane"
        :title="title"
      ></right-div>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>
<script>
import tableHeader from "../components/TableHeader";
import { progresswarninglist } from "@/api/index.js";
import rightDiv from "../components/rightDiv";
import { getnowwarning } from "@/api/notice.js";
import { export_json_to_excel } from "@/utils/export2Excel.js";

export default {
  components: {
    tableHeader,
    rightDiv,
  },
  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        city: null,
        country: null,
        key: "",
        completionYear: 2021,
        isMerge: false,
      },
      isExpand: false,
      warningdata: "",
      rightPanelShow: false,
      resultList: [],
      dialogVisible: false,
      warningMessage: "",
      tableData: [],
      isloading: false,
      AAA: {},
      total: 0,
      rateArr: [],
      warnState: {
        1: "noclick",
        2: "active",
        3: "chaoshi",
        4: "weidao",
        5: "chaoqiover",
      },
    };
  },
  methods: {
    expand(data, row) {
      data.state = row;

      this.AAA.set(data.id, row);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex > 2) {
        if (row.children && row.state) {
          return {
            rowspan: row.children.length + 1,
            colspan: 1,
          };
        } else if (row.isChildren) {
          return {
            rowspan: 1,
            colspan: 0,
          };
        } else {
          return {
            rowspan: 1,
            colspan: 1,
          };
        }
      }
    },
    //进度条颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#909399";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
    format(percentage) {
      return `${percentage}%`;
    },
    query(row) {
      this.dialogVisible = true;
      this.warningMessage = row.warning;
      this.warningdata = row.warningData;
    },
    openstate(id, name) {
      this.title = name;
      this.rightPanelShow = true;
      this.resultList = [];
      this.tableData.forEach((element) => {
        if (
          element.id == id &&
          element.progressList != "" &&
          element.progressList[name]
        ) {
          let objv = element.progressList[name].content;
          if (objv) {
            objv.forEach((v, i) => {
              let imgslist = objv[i].files;
              // let recordlist = objv[i].record;
              let treelist = [];
              let treelist1 = [];
              if (imgslist) {
                // imgslist = imgslist.split(",");
                imgslist.forEach((element) => {
                  let label = element.substring(element.lastIndexOf("/") + 1);
                  let obj = {
                    label: label,
                    url: element,
                  };
                  treelist.push(obj);
                });
              }

              objv[i].Imglist = treelist;
              this.resultList.push(objv[i]);
            });
          }
        }
      });
    },
    closeRightPane() {
      this.rightPanelShow = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    async getdata() {
      this.isloading = true;
      let res = await progresswarninglist(this.listquery);
      res.data.content.forEach((v) => {
        v.progressNames.forEach((p) => {
          v.progressNames[p.name] = p.count;
        });
      });
      res.data.content.forEach((v) => {
        if (v.warningData && v.warningData.length > 0) {
          this.rateArr.forEach((rate) => {
            v.warningData[rate.split("[")[0]] = {
              day: null,
              state: 0,
            };
          });

          v.warningData.forEach((p) => {
            if (p.day >= 0 && p.count < 100) {
              v.warningData[p.name] = {
                day: p.day,
                state: 4,
              };
            } else if (p.day < 0 && p.count < 100) {
              v.warningData[p.name] = {
                day: p.day * -1,
                state: 3,
              };
            } else if (p.day < 0 && p.count == 100) {
              v.warningData[p.name] = {
                day: p.day * -1,
                state: 5,
              };
            }
          });
        }
      });

      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.tableData.forEach((element) => {
        if (element.children) {
          if (this.AAA.has(element.id)) {
            element.state = this.AAA.get(element.id);
          } else {
            element.state = this.isExpand;
          }
        }
      });
      this.AAA = new Map();

      this.isloading = false;
    },
  },
  mounted() {
    this.AAA = new Map();
    this.getdata();
    getnowwarning().then((res) => {
      let result = res.data;
      let ratelist = [];
      if (result.progressAt1) {
        ratelist.push(`准备工作[${result.progressAt1.split(" ")[0]}]`);
      } else {
        ratelist.push("准备工作[暂无限制]");
      }
      if (result.progressAt2) {
        ratelist.push(`基础调查[${result.progressAt2.split(" ")[0]}]`);
      } else {
        ratelist.push("基础调查[暂无限制]");
      }
      if (result.progressAt3) {
        ratelist.push(`编制方案[${result.progressAt3.split(" ")[0]}]`);
      } else {
        ratelist.push("编制方案[暂无限制]");
      }
      if (result.progressAt4) {
        ratelist.push(`咨询论证[${result.progressAt4.split(" ")[0]}]`);
      } else {
        ratelist.push("咨询论证[暂无限制]");
      }
      if (result.progressAt5) {
        ratelist.push(`审查审核[${result.progressAt5.split(" ")[0]}]`);
      } else {
        ratelist.push("审查审核[暂无限制]");
      }
      if (result.progressAt6) {
        ratelist.push(`审批公告[${result.progressAt6.split(" ")[0]}]`);
      } else {
        ratelist.push("审批公告[暂无限制]");
      }

      this.rateArr = ratelist;
    });
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";
.warning-container {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}

.header {
  font-size: 14px;
  font-weight: 600;
  line-height: 35px;
  margin-right: 5px;
  border-top: 1px dashed #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;

  i {
    color: #4778c7;
  }
  .warning-tips {
    font-size: 12px;
    padding-left: 5px;
    font-weight: 300;
    color: black;
    i {
      font-size: 16px;
      color: #e6a23c;
      margin-right: 5px;
    }
  }
}

::v-deep .el-progress-bar__outer {
  height: 15px !important;
}
::v-deep .el-table thead.is-group th {
  /* background: #f5f7fa; */
  background-color: #8e98b5;
}
.chaoqiover {
  background-color: rgb(0, 134, 139, 0.7);
  color: #fff;
  border: 1px solid rgb(0, 134, 139, 0.7);
}
.progressli {
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .el-progress {
    width: 120px;
  }
  .spanicon {
    width: 23px;
    height: 23px;
    font-size: 10px;
    border-radius: 50%;
    margin-left: 5px;
  }
}
.warnig-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #4778c7;
  .warning-title {
    font-size: 14px;
    padding-left: 5px;
  }
  .warnig-num {
    font-size: 24px;
    font-weight: 600;
    color: red;
  }
}
// .jieduanul {
//   list-style: none;
//   margin: 0;
//   padding: 5px 0px;
//   width: 100%;
//   display: flex;
//   justify-content: center;
//   li {
//     margin-right: 35px;
//     font-size: 10px;
//     border-radius: 3px;
//     padding: 5px 25px;
//     background-color: #fff;
//     border: 1px solid #ccc;
//     cursor: pointer;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     .spanwenzi {
//       line-height: 20px;
//     }
//     .spanicon {
//       width: 23px;
//       height: 23px;
//       font-size: 10px;
//       border-radius: 50%;
//       margin-left: 5px;
//     }
//   }
//   .active {
//     // background-color: #4778c7;
//     color: #fff;
//     cursor: pointer;
//     // border: 1px solid #4778c7;
//   }
//   .noclick {
//     pointer-events: none !important;
//   }
//   .chaoshi {
//     background-color: rgb(255, 48, 48, 0.7);
//     color: #fff;
//     border: 1px solid rgba(255, 48, 48, 0.7);
//   }
//   .weidao {
//     background-color: #e6a23c;
//     color: #fff;
//     border: 1px solid #e6a23c;
//   }
// }
.redicon {
  color: red;
}
::v-deep .el-badge__content.is-fixed {
  position: absolute;
  top: 5px;
  right: 50px;
  -webkit-transform: translateY(-50%) translateX(100%);
  transform: translateY(-50%) translateX(100%);
}
.active {
  // background-color: #4778c7;
  color: #fff;
  cursor: pointer;
  // border: 1px solid #4778c7;
}
.noclick {
  pointer-events: none !important;
}
.chaoshi {
  background-color: rgb(255, 48, 48, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 48, 48, 0.7);
}
.weidao {
  background-color: #e6a23c;
  color: #fff;
  border: 1px solid #e6a23c;
}
.warn {
  // background-color: #cd5555;
  i {
    font-size: 18px;
  }
}
</style>
